<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>
<body>
<div id="div1" class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="请输入6-20位的用户名"
                       v-model="formData.username">
                <span id="helpUser" :class="infoCls.clsUser" v-html="infoUser"></span>
            </div>
            <div class="form-group">
                <label for="pwd1">密码</label>
                <input type="password" class="form-control" id="pwd1" placeholder="" v-model="formData.pwd1">
            </div>
            <div class="form-group">
                <label for="pwd2">确认密码</label>
                <input type="password" class="form-control" id="pwd2" placeholder="" v-model="formData.pwd2">
            </div>
            <div class="form-group">
                <label for="email">电子邮箱</label>
                <input type="password" class="form-control" id="email" placeholder="" v-model="formData.email">
            </div>
            <div class="form-group">
                <label for="pwd2">手机号码</label>
                <input type="password" class="form-control" id="phone" placeholder="" v-model="formData.phone">
            </div>
            <button type="button" class="btn btn-primary" @click="handlerSubmit">提交</button>

        </div>
        <div class="col"></div>
    </div>

</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        //元素
        el: '#div1',
        //数据
        data: {
            formData: {
                username: '',
                pwd1: '',
                pwd2: '',
                email: '',
                phone: ''
            },
            infoCls: {
                clsUser: ['text', 'text-danger'],
                clsPwd1: [],
            },
        },
        //生命周期钩子
        created() {
        },
        mounted() {
        },
        beforeDestroy() {
        },
        //计算属性
        computed: {
            infoUser() {
                const reg = /^\w{6,20}$/
                let info = "";
                if (reg.test(this.formData.username)) {
                    info = "success";
                    this.infoCls.clsUser = ['text', 'text-success']
                } else {
                    info = "error"
                    this.infoCls.clsUser = ['text', 'text-danger']
                }
                return info;
            },
            infoPwd1() {

            }
        },
        //过滤
        filters: {},
        //监听
        watch: {

        },
        //事件
        methods: {
            handlerSubmit(e) {

            }
        }
    })
</script>
</body>
</html>